/*=-=-=-=-=-=
general classes
=-=-=-=-=-=*/
.pointer {
  cursor: pointer;
}

/*=-=-=-=-=-=
spaces - sizes
=-=-=-=-=-=*/
.fullPage {
  min-height: calc(100vh - 240px);
  @media (max-width: 576px) {
    min-height: calc(100vh - 190px);
  }
}

.mt-spacing {
  margin-top: $ainiro_spacing;
}

/*=-=-=-=-=-=
background
=-=-=-=-=-=*/
.bg-light {
  background-color: $ainiro_default_grey5;
  border-radius: $ainiro_radius_sm;
}

/*=-=-=-=-=-=
text
=-=-=-=-=-=*/
.text-primary {
  color: $ainiro_primary;
}

.text-muted {
  color: $ainiro_default_grey3;
}

.text-danger {
  color: $ainiro_error;
}

.text-success {
  color: $ainiro_success;
}

.error {
  color: $ainiro_error;
}

.word-break {
  word-break: break-word;
}

.code {
  font-family: 'Courier New', 'Courier', 'monospace';
  font-size: .8rem;
  line-height: .9rem;
}

/*=-=-=-=-=-=
snackbar classes
=-=-=-=-=-=*/
.successMessage {
  color: $ainiro_success;

  button {
    color: $ainiro_success;
  }
}

.errorMessage {
  color: $ainiro_error;

  button {
    color: $ainiro_error;
  }
}

/*=-=-=-=-=-=
hover
=-=-=-=-=-=*/
.hoverable-row {
  @include general_transition(0.3s);

  &:hover {
    background-color: transparentize($color: $ainiro_default_alt, $amount: 0.5);
  }
}

/*=-=-=-=-=-=
table
=-=-=-=-=-=*/
.table-responsive {
  width: 100%;
  overflow-x: auto;
  @include scrollbar_horizontal($ainiro_default_alt, $ainiro_default_grey4, 5px);

  th.mat-header-cell:not(:first-child),
  td.mat-cell:not(:first-child) {
    padding-left: 5px;
  }

  th.mat-header-cell:not(:last-child),
  td.mat-cell:not(:last-child) {
    padding-right: 5px;
  }

  th.small-table-column,
  td.small-table-column {
    width: 10px;
  }

  @media(min-width: 577px) {
    th.mat-header-cell {
      border-bottom: 1px solid $ainiro_default_grey5;
      padding: 15px 0;
    }
  }
}

@media(max-width: 576px) {

  // :root .fullPage {
  .table-responsive:not(.leave-as-normal) {
    overflow: unset;

    table {
      table-layout: fixed;
    }

    thead tr {
      display: none;
    }

    tbody {
      display: block;
    }

    tr.mat-row {
      display: flex;
      flex-direction: column;
      height: auto;
      padding: 25px;
      background-color: whitesmoke;
      border-radius: 10px;
      margin-bottom: 20px;

      td.mat-cell {
        .py-0 {
          padding: 0 !important;
        }

        padding: 5px 0 !important;
        font-size: 12px;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;

        &:first-child {
          display: flex;
          align-items: center;

          .mt-2 {
            margin-top: 0 !important;
          }
        }

        &:last-child {
          display: flex;
          justify-content: flex-end;
          margin-top: 10px;
        }
      }
    }
  }
}
